<template>
	<view class="class-selector">
		<view 
			class="class-item" 
			v-for="classItem in classList" 
			:key="classItem.id" 
			:class="{ active: selectedClass === classItem.name }"
			@click="handleClassClick(classItem)"
		>
			<text class="class-text">{{ classItem.name }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ClassSelector',
	props: {
		// 当前选中的班级
		selectedClass: {
			type: String,
			default: '2201班'
		},
		// 班级列表数据
		classList: {
			type: Array,
			default: () => [
				{ id: 1, name: '2201班' },
				{ id: 2, name: '2202班' },
				{ id: 3, name: '2203班' },
				{ id: 4, name: '2204班' },
				{ id: 5, name: '2205班' }
			]
		}
	},
	methods: {
		handleClassClick(classItem) {
			// 向父组件发送点击事件
			this.$emit('class-change', classItem);
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@text-light: #666;
@white: #fff;

.class-selector {
	display: flex;
	gap: 16rpx;
	margin-bottom: 20rpx;
	overflow-x: auto;

	.class-item {
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: @text-light;
		border: 2rpx solid #e0e0e0;
		background: #f8f8f8;
		flex-shrink: 0;
		cursor: pointer;
		transition: all 0.2s;

		&.active {
			background: @primary-color;
			color: @white;
			border-color: @primary-color;
		}

		&:active {
			transform: scale(0.95);
		}

		.class-text {
			font-size: 24rpx;
			transition: all 0.2s;
		}
	}
}
</style>
